<template>
  <div>
    <div class="head">
      <van-nav-bar
        title="下拉菜单"
        left-text=""
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>

    <van-index-bar>
      <div v-for="item in indexList" :key="item">
        <van-index-anchor :index="item" :value="item" />
        <Son :list="cityValues" :item="item" @getValue="getValue"></Son>
        <!-- <van-cell :title="value.label" v-for="value in sum" :key="value.label"/> -->
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { setCity } from '@/utils/storage'
import Son from '@/components/areacity.vue'
import { city } from '@/api/city'
export default {
  components: {
    Son,
  },
  props: {},
  data() {
    return {
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
      ],
      cityValues: [],
      getCityName:''
    }
  },
  computed: {},
  watch: {},
  async created() {
    const data = await city()
    // console.log(data)
    this.cityValues = [...this.cityValues, ...data.body]
    // console.log(this.cityValues)
    // const res = this.cityValues.map((item) => {
    //   return item.short.split('')[0].toUpperCase()
    // })
    // console.log(res)
  },

  methods: {
    
 getValue(value) {
  console.log(value);
    setCity(value)
    this.$router.push('/index')
  //  console.log(data);
  // this.getCityName=data.label
  // console.log(this.getCityName);
  
    },
  },
}
</script>

<style scoped>
.head {
  position: fixed;
}
</style>
